<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Card>
            <header>
                <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
                    <span>确定时间：</span>
                    <DatePicker v-model="transferCondition.transferBeginDate" type="date" style="width: 150px" name="transferBeginDate"></DatePicker>
                    <span> 至</span>
                    <DatePicker v-model="transferCondition.transferEndDate" type="date" placement="bottom-end" style="width: 150px" name="transferEndDate"></DatePicker>
                    <span style="width: 200px;margin-left: 20px;" >状态：</span>
                    <Select v-model="transferCondition.transferStatus" class="v-select-wrapper" style="width:150px" name="transferStatus">
                        <Option v-for="item in statusList" :value="item.key" :key="item.key">{{ item.label }}</Option>
                    </Select>
                    <span style="width: 200px;margin-left: 20px;" >项目名称：</span>
                    <Select v-model="transferCondition.projectCode" class="v-select-wrapper" style="width:150px" name="projectCode">
                        <Option v-for="item in projectNameList" :value="item.key" :key="item.key">{{ item.label }}</Option>
                    </Select>
                    <Button type="primary" @click="listQuery" style="margin-left: 20px;" >查询</Button>
                    <input type="hidden" name="pageNum" id="pageNum" value="" />
                    <input type="hidden" name="pageSize" id="pageSize" value="" />
                </Form>
            </header>
        </Card>
        <Form action="" method="get" name="exportListFile" id="exportListFile" enctype="multipart/form-data">
            <input id="id" name="id" type="hidden" />
            <input id="fileType" name="fileType" type="hidden" />
            <input id="fileName" name="fileName" type="hidden" />
        </Form>
        <Card>
            <div>
                <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
            </div>
            <div style="text-align: center;margin-top: 36px;">
                <Page :total="transferCondition.total" :current="transferCondition.pageNum" :page-size="transferCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
            <div style="margin-top: 93px;text-align: center;">
                <Button type="primary" @click="addData" style="margin-left: 20px;" >新增</Button>
                <Button type="primary" @click="downLoad" style="margin-left: 20px;" >下载</Button>
            </div>
        </Card>
    </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      transferCondition: {
        transferBeginDate: '',
        transferEndDate: '',
        transferStatus: '',
        projectCode: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      orderColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '项目名称',
          key: 'projectName',
          align: 'center'
        },
        {
          title: '确认时间',
          key: 'confirmDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.confirmDate))
            ])
          }
        },
        {
          title: '还款明细',
          key: 'paymentName',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  document.getElementById('exportListFile').action = this.$appContext.marvels_core_financial + 'financial/fund/bhLiquidation/service/downConfirmPayment'
                  document.getElementById('id').value = params.row.id
                  document.getElementById('fileType').value = '1'
                  document.getElementById('fileName').value = params.row.paymentName
                  document.getElementById('exportListFile').submit()
                }
              }
            }, params.row.paymentName)
          }
        },
        {
          title: '回款确认书',
          key: 'backName',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  document.getElementById('exportListFile').action = this.$appContext.marvels_core_financial + 'financial/fund/bhLiquidation/service/downConfirmPayment'
                  document.getElementById('id').value = params.row.id
                  document.getElementById('fileName').value = params.row.backName
                  document.getElementById('fileType').value = '2'
                  document.getElementById('exportListFile').submit()
                }
              }
            }, params.row.backName)
          }
        },
        {
          title: '创建人',
          key: 'createdBy',
          align: 'center'
        },
        {
          title: '发送人',
          key: 'sender',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === '0') {
              return h('span', {
              }, '未发送')
            } else if (params.row.status === '1') {
              return h('span', {
              }, '已发送')
            } else if (params.row.status === '2') {
              return h('span', {
              }, '已确认')
            }
          }
        },
        {
          title: '操作',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  var vm = this
                  vm.deleteData(params.row.id)
                }
              }
            }, '删除')
          }
        },
        {
          title: '发送',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  var vm = this
                  vm.sendData(params.row.id)
                }
              }
            }, '发送')
          }
        }
      ],
      orderData: [],
      statusList: [
        {
          'key': '',
          'label': '请选择'
        },
        {
          'key': '1',
          'label': '已发送'
        },
        {
          'key': '0',
          'label': '待发送'
        },
        {
          'key': '2',
          'label': '已确认'
        }
      ],
      projectNameList: [
        {
          key: '',
          label: '请选择'
        },
        {
          key: 'YKD01',
          label: '云科谷个人消费贷款单一资金信托项目'
        }
      ]
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.listQuery()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.transferCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.transferCondition.pageSize = pageLength
      vm.listQuery()
    },
    addData () {
      this.$router.push({ name: 'repayment-confirm-add' })// 类似post传参
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/bhLiquidation/service/confirmPaymentList', vm.transferCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.transferCondition.total = data.data.total
      }).catch(er => {

      })
    },
    downLoad () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/fund/bhLiquidation/service/downAllConfirmPayment'
      document.getElementById('pageNum').value = this.transferCondition.pageNum
      document.getElementById('pageSize').value = this.transferCondition.pageSize
      document.getElementById('exportList').submit()
    },
    deleteData (id) {
      this.$Modal.confirm({
        content: '确定删除?',

        okText: '确定',

        cancelText: '取消',
        onOk: () => {
          var vm = this
          vm.transferCondition.id = id
          this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/bhLiquidation/service/deleteConfirmPayment', vm.transferCondition).then(re => {
            var data = re.data
            var message = data.message
            vm.listQuery()
            this.$Message.warning(message)
          }).catch(er => {

          })
        }
      })
    },
    sendData (id) {
      var vm = this
      vm.transferCondition.id = id
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/bhLiquidation/service/sendConfirmPayment', vm.transferCondition).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.warning(message)
      }).catch(er => {

      })
    }

  }
}
</script>
